<html>﻿<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Popup - 从 Markup 中构建</title><script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
<link href="../../../../../../g.alicdn.com/kissy/k/1.4.7/css/dpl/base.css" tppabs="http://g.alicdn.com/kissy/k/1.4.7/css/dpl/base.css" rel="stylesheet"/>

<link href="../button/assets/custombutton.css" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/button/assets/custombutton.css" rel="stylesheet"/>
<style>
    .ks-overlay {
        position:absolute;
        left:-9999px;
        top:-9999px;
        z-index: 100;
    }
    .ks-overlay-hidden {
        visibility: hidden;
    }

    .ks-overlay-mask-hidden {
        display: none;
    }

    .ks-overlay-shown {
        visibility: visible;
    }

    .ks-overlay-mask-shown{
        display: block;
    }
</style>
<style>
    body {
        padding: 90px 0 0 15px;
    }
    .popup {
        position: absolute;
        z-index: 50;
        border-collapse: collapse;
        left:-9999px;
        top:-9999px;
    }
    .popup td.corner {
        height: 13px;
        width: 17px;
    }
    .popup td#topleft {
        background-image: url(assets/bubble-1.png);
    }
    .popup td.top {
        background-image: url(assets/bubble-2.png);
    }
    .popup td#topright {
        background-image: url(assets/bubble-3.png);
    }
    .popup td.left {
        background-image: url(assets/bubble-4.png);
    }
    .popup td.right {
        background-image: url(assets/bubble-5.png);
    }
    .popup td#bottomleft {
        background-image: url(assets/bubble-6.png);
    }
    .popup td.bottom {
        background-image: url(assets/bubble-7.png);
        text-align: center;
    }
    .popup td.bottom img {
        display: block;
        margin: 0 auto;
    }
    .popup td#bottomright {
        background-image: url(assets/bubble-8.png);
    }
    .popup table.popup-contents {
        font-size: 12px;
        line-height: 1.2em;
        background-color: #fff;
        color: #666;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    }
    table.popup-contents th {
        text-align: right;
        text-transform: lowercase;
    }
    table.popup-contents td {
        text-align: left;
    }
    tr#release-notes th {
        text-align: left;
        text-indent: -9999px;
        background: url(assets/starburst.gif) no-repeat top right;
        height: 17px;
    }
    tr#release-notes td a {
        color: #333;
    }

</style>
</head>
<body>
<a style="cursor:pointer"><img id="img-download" src="assets/nav-download.png" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/overlay/assets/nav-download.png"/></a>
<div class="popup" id="dpop">
    <div class="ks-popup-content">
    <table>
        <tr>
            <td class="corner" id="topleft"></td>
            <td class="top"></td>
            <td class="corner" id="topright"></td>
        </tr>
        <tr>
            <td class="left"></td>
            <td>
                <table class="popup-contents">
                    <tr>
                        <th>File:</th>
                        <td>coda 1.7.zip</td>
                    </tr>
                    <tr>
                        <th>Date:</th>
                        <td>11/5/10</td>
                    </tr>
                    <tr>
                        <th>Size:</th>
                        <td>20 MB</td>
                    </tr>
                    <tr>
                        <th>Req:</th>
                        <td>Mac OS X 10.4+</td>
                    </tr>
                    <tr id="release-notes">
                        <th>Read the release notes:</th>
                        <td><a href="#" title="Read the release notes">release notes</a></td>
                    </tr>
                </table>
            </td>
            <td class="right"></td>
        </tr>
        <tr>
            <td id="bottomleft" class="corner"></td>
            <td class="bottom"><img src="assets/bubble-tail2.png" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/overlay/assets/bubble-tail2.png" width="30" height="27" alt="popup tail"/></td>
            <td class="corner" id="bottomright"></td>
        </tr>
    </table>
    </div>
</div>
<div id="button-wrap"></div>
<script src="assets/demo1.js" tppabs="http://docs.kissyui.com/1.4/source/raw/demo/overlay/assets/demo1.js"></script>
</body>
</html>
